<template>
	<view>
		<view class="backIndex" @tap="goIndex" v-if="isDisplayBack === true">
			<image src="/static/images/leftb.png" mode="" style="width:17upx;height:30upx;margin-right: 20upx;"></image>
			返回首页
		</view>
		<view class="title">

			<view class="title-left" @tap="version(1)">
				<image :src="srcp" style="width:300rpx;height:242rpx;">
				</image>
			</view>
			<view class="title-right" @tap="version(2)">
				<image :src="srcc" style="width:300rpx;height:242rpx;">
				</image>
			</view>
		</view>
		<view class="content">
			<view class="switch-login">
				<view class="switch-user-login" @tap="memberLogin(1)">
					<text class="switch-login-text" v-if="cate == 2" :class="{ activeBlue : active1 }">密码登录</text>
					<text class="switch-login-text" v-else :class="{ activeRed : active1 }">密码登录</text>
				</view>

				<view class="switch-mobile-login" @tap="memberLogin(2)">
					<text class="switch-login-text" v-if="cate == 2" :class="{ activeBlue : active2 }">短信登录</text>
					<text class="switch-login-text" v-else :class="{ activeRed : active2 }">短信登录</text>
				</view>
			</view>
			<!-- 账密登录 -->
			<bjx-form class="form1" :rules="rules1" :form="formData" ref="form1" v-show="type === 1">
				<view class="user-login">
					<bjx-form-item class="user-login-user" label-type="inline" prop="username" label="账号">
						<view slot="label">
							<image class="user-login-user-img" src="@/static/images/shoujihao.png" mode=""></image>
						</view>
						<input class="user-login-user-content" type="text" placeholder="请输入手机号码"
							v-model="formData.username" name="username" maxlength="300" />
					</bjx-form-item>

					<bjx-form-item class="user-login-pwd" label-type="inline" prop="password" label="密码">
						<view slot="label">
							<image class="user-login-pwd-img" src="@/static/images/mimashezhi.png" mode=""></image>
						</view>
						<view class="" v-if="!isDisplay">
							<input class="user-login-pwd-content" type="password" value="" placeholder="请输入密码"
								v-model="formData.password" name="password" />
							<image class="isdisplaymima" src="@/static/images/biyan.png" @tap="translateMima(1)" alt="">
						</view>

						<view class="" v-else>
							<input class="user-login-pwd-content" type="text" value="" placeholder="请输入密码"
								v-model="formData.password" name="password" />
							<image class="isdisplaymima" src="@/static/images/zhengyan.png" @tap="translateMima(2)"
								alt="">
						</view>

					</bjx-form-item>

				</view>
				<view class="content-about">
					<view class="remember" @tap="rememberInfo1">
						<checkbox-group>
							<label>
								<checkbox value="cb" checked="true" class="remember-input" />记住密码
							</label>
						</checkbox-group>
					</view>
					<view class="forget" @tap="forget" :style="{color:mainColor}">
						忘记密码？
					</view>
				</view>
				<view class="login">
					<view class="login-content" @tap="submit1" :style="{backgroundColor:mainColor}">
						登 录
					</view>
				</view>

			</bjx-form>
			<!-- 短信验证码登录 -->
			<bjx-form class="form2" :rules="rules2" :form="formData" ref="form2" v-show="type === 2">
				<view class="mobile-login">
					<bjx-form-item class="mobile-login-mobile" label-type="inline" prop="mobile" label="手机号码">
						<view slot="label">
							<image class="mobile-login-mobile-img" src="@/static/images/shoujihao.png"></image>
						</view>
						<input class="mobile-login-mobile-content" type="text" value="" placeholder="请输入手机号码"
							v-model="formData.mobile" name="mobile" />
					</bjx-form-item>

					<bjx-form-item class="mobile-login-code" label-type="inline" prop="code" label="短信验证码"
						style="width:96%;">
						<view slot="label">
							<image class="mobile-login-code-img" src="@/static/images/yanzhengma.png" mode=""></image>
						</view>
						<view class="get-mobile-code">
							<input class="mobile-login-code-content" type="text" value="" placeholder="短信验证码"
								v-model="formData.code" name="code" />
							<text class="mobile-login-code-btn" @tap="getCode">{{codeTip}}</text>
						</view>
					</bjx-form-item>

				</view>

				<view class="login">
					<view class="login-content" @tap="submit2" :style="{backgroundColor:mainColor}">
						登 录
					</view>
				</view>
			</bjx-form>

			<view class="register">
				还没有个人账号？
				<view class="go-register" @tap="goRegister" :style="{color:mainColor}">
					马上注册
				</view>
			</view>
		</view>

		<view class="agree-files">
			<image src="/static/images/remind.png" mode=""
				style="width:207upx;height:56upx;position: absolute;top:20upx" v-if="isShowRemind">
			</image>
			<view class="agree-files-content">
				<view class="remember" @tap="agree">
					<checkbox-group>
						<label>
							<checkbox value="cb" :checked="checked" class="remember-input"
								:class="'animation-' + animation" />我已阅读并同意
						</label>
					</checkbox-group>
				</view>
				<navigator class="forget" url="/pages6/pages/docs/service-contract">
					《服务协议》
				</navigator>
				<navigator class="forget" url="/pages6/pages/docs/privacy-policy">
					《隐私保护政策》
				</navigator>
			</view>

		</view>

		<view class="other-login" v-show="showOtherLogin">
			<!-- <view class="other-login-text">
				<image src="/static/images/xian.png" style="width:166rpx;height:2rpx;"></image>
				<view class="other-login-text-title">
					其它登录方式
				</view>
				<image src="/static/images/xian.png" style="width:166rpx;height:2rpx;"></image>
			</view> -->
			<image v-if="isShowWx" src="/static/images/weixindenglu.png" style="width:82rpx;height:82rpx;"
				@tap="wxLogin"></image>

			<view v-if="isShowApple == true" class="apple_login" @tap="appleLogin">
				<image src="/static/images/apple.png" mode="" style="width: 30upx;height: 30upx;"></image>
				<text style="font-size: 26upx;color: #fff;">通过Apple登录</text>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				cate: 1,
				type: 1,
				animation: '',
				isShowRemind: false,
				isDisplayBack: true,
				isShowWx: true,
				isShowApple: false,
				active1: true,
				active2: false,
				perActive: true,
				comActive: false,
				srcp: '/static/images/gerenban2.png',
				srcc: '/static/images/qiyeban1.png',
				codeTip: '获取验证码',
				numShow: false,
				second: 60,
				checked: false,
				checked1: true,
				// checked2: true,
				showOtherLogin: true,
				// passwordType: 'password',
				mainColor: '#f3431a',

				isDisplay: false,
				passwordFontSize: '32rpx',
				placeholder: '',
				isFirst: true,

				noClick: true,

				formData: {
					username: '',
					password: '',
					mobile: '',
					code: ''
				},
				rules1: {
					username: {
						required: true,
						rule: 'type:string|length:~,20',
						message: {
							length: '账号不能超过20个字符'
						}
					},
					password: {
						required: true,
						rule: 'type:string|length:6,20',
						message: {
							length: '密码为6-20个字符'
						}
					}
				},
				rules2: {
					mobile: {
						required: true,
						rule: 'length:11',
						message: {
							reg: '请填写正确格式的手机号码'
						}
					},
					code: {
						required: true,
						rule: 'type:string',
						message: {
							type: '短信验证码不能为空'
						}
					}
				},

				appid: "wx5f6ba2c4d12e2e1f",
				unionId: "",
				openId: ""
			}
		},

		onPageScroll: function(Object) {
			if (Object.scrollTop >= 22) {
				this.isDisplayBack = false;
			} else {
				this.isDisplayBack = true;
			}
		},

		components: {

		},
		watch: {
			password(newPassword, oldPassword) {
				// console.log(newPassword)
				// console.log(oldPassword)
				if (newPassword) {
					this.passwordFontSize = this.isDisplay == true ? '32rpx' : '24rpx'
					this.placeholder = '';
					if (newPassword.length > oldPassword.length) {
						if (newPassword != uni.getStorageSync('password')) {
							let newWord = newPassword.substr(newPassword.length - 1, 1)
							if (/[0-9a-zA-Z]/.test(newWord)) {
								this.formData.password = this.formData.password + newWord;
							} else {
								if (!this.isFirst) {
									this.$api.msg('密码只能输入大小写字母和数字');
								}
							}
						}
					} else if (newPassword.length < oldPassword.length) {
						this.formData.password = this.formData.password.substr(0, this.formData.password.length - 1);
					} else {
						// console.log('==')
					}

				} else {
					this.passwordFontSize = '32rpx'
					this.placeholder = '请输入密码'
					this.formData.password = '';
				}
				if (this.formData.password.length > 0) {
					if (!this.isDisplay) {
						this.changeStar(this.formData.password);
					} else {
						this.password = this.formData.password
					}

				} else {
					this.password = ''
				}
			},
		},

		onLoad(option) {
			this.formData.username = uni.getStorageSync('username');
			this.formData.password = uni.getStorageSync('password');
			if (!this.formData.password) {
				this.formData.password = '111111'
			}

			// this.changeStar(this.formData.password);
			this.formData.mobile = uni.getStorageSync('mobile');
			// if (!this.password) {
			// 	this.placeholder = '请输入密码'
			// 	this.formData.password = '';
			// }

			if ([1, 2].indexOf(option.cate) > -1 || ['1', '2'].indexOf(option.cate) > -1) {
				this.cate = option.cate;
			} else {
				let cate = uni.getStorageSync('cate');
				if ([1, 2].indexOf(cate) > -1) {
					this.cate = cate;
				}
			}

			switch (parseInt(this.cate)) {
				case 1:
					this.perActive = true;
					this.comActive = false;
					this.mainColor = '#f3431a';
					break;
				case 2:
					this.perActive = false;
					this.comActive = true;
					this.mainColor = '#f3431a';

					this.srcp = '/static/images/gerenban1.png';
					this.srcc = '/static/images/qiyeban2.png';

					break;
			}

			// #ifdef APP-PLUS
			this.showOtherLogin = true;

			if (uni.getSystemInfoSync().platform == 'ios') {
				this.isShowApple = true;

				if (plus.runtime.isApplicationExist({
						pname: 'com.tencent.mm',
						action: 'weixin://'
					})) {

				} else {
					this.isShowWx = false
				}

			}

			// #endif

			// #ifdef H5
			if (this.$wechat && this.$wechat.isWechat()) {
				this.showOtherLogin = true;

				//微信公众号登录
				if (!this.unionId) {
					if (window.location.href.indexOf('?code=') !== -1 || window.location.href.indexOf('&code=') !== -1) {
						let code;
						if (window.location.href.indexOf('?code=') !== -1) {
							code = window.location.href.split('?code=')[1].split('&')[0];
						} else {
							code = window.location.href.split('&code=')[1].split('&')[0];
						}
						//请求后端网络请求
						this.getWxOpenId(code);
					}
				}
			}
			// #endif

			setTimeout(() => {
				this.isFirst = false
			}, 600)
		},

		// watch: {
		// 	// 使用watch来响应数据的变化
		// 	isDisplay(newVal, oldVal) {
		// 		console.log('最新值是：' + newVal, "原来的值是：" + oldVal);
		// 		if (newVal == true) {
		// 			this.passwordType = 'text';
		// 		}
		// 		if (newVal == false) {
		// 			this.passwordType = 'password';
		// 		}
		// 	}
		// },

		methods: {
			...mapMutations(['login']),

			// uni.login({
			//     provider: 'apple',
			//     success: function (loginRes) {
			//         // 登录成功
			//         uni.getUserInfo({
			//             provider: 'apple',
			//             success: function(info) {
			//                 // 获取用户信息成功, info.authResult中保存登录认证数据
			//             }
			//         })
			//     },
			//     fail: function (err) {
			//         // 登录授权失败  
			//         // err.code错误码参考`授权失败错误码(code)说明`
			//     }
			// });

			// async changeStar(str) {
			// 	var psd = '';
			// 	for (var i = 0; i < str.length; i++) {
			// 		psd = psd + '●'
			// 	};

			// 	this.password = psd;
			// },

			async translateMima(type) {
				switch (type) {
					case 1:
						// this.password = this.formData.password
						this.isDisplay = true;

						break;
					case 2:
						this.isDisplay = false;
						// this.changeStar(this.formData.password)
						// this.passwordType = 'password';
						break;
				}
			},

			async getWxOpenId(code) {
				let res = await this.$myRequest({
					url: '/getWxOpenId',
					data: {
						code: code
					}
				})

				if (res.data.status == 1) {
					this.unionId = res.data.data.unionid
					this.openId = res.data.data.openid
					let dataObj = {
						openId: this.openId,
						unionId: this.unionId,
						type: 2
					}
					this.loginWx(dataObj)
				}
			},

			async goRegister() {
				// console.log(this.cate)
				uni.setStorageSync('loginBeforeCate', this.cate)
				// if (this.cate == 1) {
				// 	uni.navigateTo({
				// 		url: '/pages2/pages/register-user/register-user'
				// 	})
				// } else if (this.cate == 2) {
				// 	uni.navigateTo({
				// 		url: '/pages4/pages/register-company/register-company'
				// 	})
				// }
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},

			//个人/企业
			async version(id) {
				this.cate = id;
				switch (id) {
					case 1:
						this.perActive = true;
						this.comActive = false;
						this.mainColor = '#f3431a';

						this.srcp = '/static/images/gerenban2.png';
						this.srcc = '/static/images/qiyeban1.png';

						break;
					case 2:
						this.perActive = false;
						this.comActive = true;
						this.mainColor = '#f3431a';

						this.srcp = '/static/images/gerenban1.png';
						this.srcc = '/static/images/qiyeban2.png';

						break;
				}
			},
			//登录方式
			async memberLogin(id) {
				this.type = id;
				switch (id) {
					case 1:

						this.active1 = true;
						this.active2 = false;
						break;
					case 2:

						this.active1 = false;
						this.active2 = true;
						break;
				}

			},

			async getCode() {
				//防止连续点击
				let that = this;
				if (that.noClick) {
					that.noClick = false;
					setTimeout(function() {
						that.noClick = true;
					}, 2000)
				} else {
					this.$api.msg("请稍后再试")
					return false;
				}
				if (this.numShow == true) {
					this.$api.msg(this.second + 's之内不可再次发送');
					return false;
				}
				if (!this.formData.mobile) {
					this.$api.msg('请输入手机号码');
					return false;
				}

				let res = await this.$myRequest({
					url: '/getCode/' + this.formData.mobile
				})

				this.$api.msg(res.data.msg, 'success')
				this.codeTip = '60s'
				this.numShow = true
				var interval = setInterval(() => {
					--this.second;
					this.codeTip = this.second + 's'
					if (this.second <= 0) {
						clearInterval(interval);
						this.codeTip = '获取验证码';
						this.numShow = false;
						this.second = 60
					}
				}, 1000)

			},
			//记住登录信息
			async rememberInfo1() {
				if (this.checked1 === true) {
					this.checked1 = false
				} else {
					this.checked1 = true;
				}
				// console.log(this.checked1)
				if (this.checked1 === true) {
					uni.setStorageSync('username', this.formData.username);
					uni.setStorageSync('password', this.formData.password);
				} else {
					uni.setStorageSync('username', '');
					uni.setStorageSync('password', '');
				}
			},

			// async rememberInfo2() {
			// 	if (this.checked2 === true) {
			// 		this.checked2 = false
			// 	} else {
			// 		this.checked2 = true;
			// 	}

			// 	if (this.checked2 === true) {
			// 		uni.setStorageSync('mobile', this.formData.mobile);
			// 	} else {
			// 		uni.setStorageSync('mobile', '');
			// 	}
			// },

			async agree() {
				if (this.checked === true) {
					this.checked = false
				} else {
					this.checked = true;
					this.isShowRemind = false;
				}
			},

			// 触发提交表单
			submit1() {
				if (this.checked1 === true) {
					uni.setStorageSync('username', this.formData.username);
					uni.setStorageSync('password', this.formData.password);
				}

				this.$refs.form1.validate(val => {
					if (val == true) {
						let dataObj = {
							cate: this.cate,
							type: this.type,
							username: this.formData.username,
							password: this.formData.password
						};
						this.submit(dataObj);
					}
				})
			},
			submit2() {
				if (this.checked1 === true) {
					uni.setStorageSync('mobile', this.formData.mobile);
				}
				this.$refs.form2.validate(val => {
					if (val == true) {
						let dataObj = {
							cate: this.cate,
							type: this.type,
							mobile: this.formData.mobile,
							code: this.formData.code
						};
						this.submit(dataObj);
					}
				})
			},

			//登录提交
			async submit(dataObj) {
				if (this.checked === false) {
					// this.$api.msg('请先同意用户协议！')
					uni.pageScrollTo({
						scrollTop: 58,
						duration: 0
					});
					this.isShowRemind = true;
					this.animation = 'shake';
					setTimeout(() => {
						this.animation = ''
					}, 2000);
					return false;
				}

				let res = await this.$myRequest({
					url: '/login',
					data: dataObj,
					methods: 'post'
				})

				if (res.data.status == 1) {
					this.$api.msg('登录成功', 'success', 1000);
					let token = res.data.token;
					this.loginAfter(token);
				} else {
					this.$api.msg(res.data.msg);
				}
			},

			async loginAfter(token) {
				uni.setStorageSync('token', token);
				uni.setStorageSync('cate', this.cate);

				let url = '/getUserInfo';
				if (this.cate == 2) {
					url = '/getComInfo';
				}
				let res = await this.$myRequest({
					url: url,
					data: {
						cate: this.cate,
						token: token
					},
					methods: 'post'
				})

				this.login(res.data.data);

				// uni.$emit('indexUserLogin')
				// console.log(this.hasLogin)
				setTimeout(function() {
					uni.redirectTo({
						url: '/pages/index/index'
					})
				}, 1000)
			},

			forget() {
				// console.log(this.cate)
				uni.setStorageSync('loginBeforeCate', this.cate)
				uni.navigateTo({
					url: '/pages/forget/forget?cate=' + this.cate,
				})
			},

			//获取微信信息
			async wxLogin() {
				if (this.checked === false) {
					this.isShowRemind = true;
					this.animation = 'shake';
					setTimeout(() => {
						this.animation = ''
					}, 2000);
					return false;
				}

				let that = this;
				// #ifdef APP-PLUS
				if (plus.runtime.isApplicationExist({
						pname: 'com.tencent.mm',
						action: 'weixin://'
					})) {

					uni.login({
						provider: 'weixin',
						success: (loginRes) => {
							// 获取用户信息
							uni.getUserProfile({
								provider: 'weixin',
								success: (infoRes) => {
									infoRes.userInfo.type = 3;
									this.loginWx(infoRes.userInfo)
								}
							});
						}
					});

				} else {
					this.$api.msg('微信应用未安装')
				}
				// #endif

				// #ifdef H5
				if (this.$wechat && this.$wechat.isWechat()) {
					//微信浏览器
					this.getAccessToken();
				} else {
					//非微信浏览器
				}
				// #endif

				// #ifdef MP-WEIXIN

				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								let dataObj = {
									code: loginRes.code,
									encryptedData: infoRes.encryptedData,
									iv: infoRes.iv,
									type: 1
								}
								that.loginWx(dataObj)
							}
						});
					}
				});
				// #endif
			},

			//app第三方微信登录
			async loginWx(dataObj) {
				dataObj.cate = this.cate;
				let res = await this.$myRequest({
					url: '/wechatLogin',
					data: dataObj,
					methods: 'post'
				})

				if (res.data.status == 1) {
					this.$api.msg('登录成功', 'success', 1000);
					let token = res.data.token;
					this.loginAfter(token);
				} else {
					this.$api.msg(res.data.msg);
				}
			},

			async appleLogin() {
				// #ifdef APP-PLUS
				if (this.checked === false) {
					this.isShowRemind = true;
					this.animation = 'shake';
					setTimeout(() => {
						this.animation = ''
					}, 2000);
					return false;
				}
				let that = this;
				if (uni.getSystemInfoSync().platform == 'ios') {

					uni.login({
						provider: 'apple',
						success: function(loginRes) {
							// console.log(loginRes)
							// 登录成功
							// uni.getUserInfo({
							// 	provider: 'apple',
							// 	success: function(info) {
							// 		// 获取用户信息成功, info.authResult中保存登录认证数据
							// 		console.log(info)
							// 		this.loginApple(infoRes.userInfo)
							// 	}
							// })

							let openId = loginRes.authResult.openid;
							let dataObj = {
								openId: openId
							}
							that.loginApple(dataObj)
						},
						fail: function(err) {
							// 登录授权失败  
							// err.code错误码参考`授权失败错误码(code)说明`
							console.log(err)
						}
					});
				} else {
					this.$api.msg('非苹果系统不可绑定！')
				}
				// #endif

			},

			//app第三方微信登录
			async loginApple(dataObj) {
				dataObj.cate = this.cate;
				let res = await this.$myRequest({
					url: '/apple_login',
					data: dataObj,
					methods: 'post'
				})

				if (res.data.status == 1) {
					this.$api.msg('登录成功', 'success', 1000);
					let token = res.data.token;
					this.loginAfter(token);
				} else if (res.data.status == 10) {
					uni.navigateTo({
						url: '/pages/login/app_login?openId=' + dataObj.openId + '&cate=' + this.cate
					})
				} else {
					this.$api.msg(res.data.msg);
				}
			},

			async getAccessToken() {
				//重点 这里getWxAppid这个是微信公众号的appid
				if (!this.unionId) {
					window.location.href =
						'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
						this.appid +
						'&redirect_uri=' + encodeURIComponent(
							'https://test.hnliandesy.com/h5/#/pages/login/login'
						) +
						'&response_type=code&scope=snsapi_userinfo#wechat_redirect';
				} else {
					let dataObj = {
						openId: this.openId,
						unionId: this.unionId,
						type: 2
					}
					this.loginWx(dataObj)
				}
			},

			goIndex() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
		font-size: $font-lg;
	}
</style>
<style lang="scss" scoped>
	.head-img {
		height: 248rpx;
		width: 100%;
	}

	.backIndex {
		z-index: 99;
		position: fixed;
		// #ifdef H5
		top: 50upx;
		// #endif
		// #ifdef APP-PLUS
		top: 120upx;
		// #endif
		// #ifdef MP-WEIXIN
		top: 86upx;
		// #endif
		left: 42upx;
		font-size: 30upx;
		display: flex;
		align-items: center;
	}

	.title {
		// #ifdef APP-PLUS
		padding: 226rpx 42rpx 70rpx;
		// #endif
		// #ifdef H5
		padding: 110rpx 42rpx 70rpx;
		// #endif
		// #ifdef MP-WEIXIN
		padding: 170rpx 42rpx 70rpx;
		// #endif
		display: flex;
		justify-content: space-between;

		.title-left,
		.title-right {
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 52rpx;
			/* font-weight: bold; */
		}

	}

	.content {
		height: auto;
		padding: 0 42rpx;

		.switch-login {
			height: 108rpx;
			width: 100%;
			background-color: #f7f7f7;
			letter-spacing: 3rpx;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;

			.switch-user-login,
			.switch-mobile-login {
				height: 108rpx;
				display: inline-flex;
				// align-items: center;
				justify-content: center;

				// font-size: 36rpx;
				width: 50%;
				padding: 28rpx 0;
				color: #333;
			}
		}
	}

	.form1 {
		.user-login {
			border-top: 1px solid #ebebeb;
			height: 186rpx;
			background-color: #f7f7f7;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;

			.user-login-user {
				height: 92rpx;
				// line-height: 78rpx;
				padding-left: 30rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #ebebeb;
				// background-color: #fff;

				.user-login-user-img {
					width: 38rpx;
					height: 40rpx;
					margin-left: 6rpx;
					margin-right: 24rpx;
				}

				.user-login-user-content {
					display: inline-block;
					font-size: $font-lg;
					color: #000;
				}
			}

			.user-login-pwd {
				position: relative;
				height: 92rpx;
				// line-height: 78rpx;
				padding-left: 30rpx;
				display: flex;
				align-items: center;
				// border-bottom: 1px solid #f3f3f6;
				// background-color: #fff;

				.user-login-pwd-img {
					width: 38rpx;
					height: 40rpx;
					margin-left: 6rpx;
					margin-right: 24rpx;
				}

				.user-login-pwd-content {
					width: 70%;
					display: inline-block;
					font-size: $font-lg;
					background-color: #F7F7F7;
					border: none;
					letter-spacing: 1rpx;
					color: #000;
					width: 340rpx;
				}
			}
		}
	}

	.form2 {
		.mobile-login {
			border-top: 1px solid #ebebeb;
			height: 186rpx;
			background-color: #f7f7f7;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;

			.mobile-login-mobile,
				{
				height: 92rpx;
				// line-height: 78rpx;
				padding-left: 30rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #ebebeb;
				// background-color: #fff;

				.mobile-login-mobile-img {
					width: 38rpx;
					height: 40rpx;
					margin-left: 6rpx;
					margin-right: 24rpx;
				}


				.mobile-login-mobile-content {
					display: inline-block;
					// font-size: 28rpx;
					color: #000;
				}

			}

			.mobile-login-code {
				height: 92rpx;
				// line-height: 78rpx;
				padding-left: 30rpx;
				display: flex;
				align-items: center;
				// border-bottom: 1px solid #f3f3f6;
				// background-color: #fff;
				width: 100%;
				position: relative;

				.mobile-login-code-img {
					width: 38rpx;
					height: 40rpx;
					margin-left: 6rpx;
					margin-right: 24rpx;
				}

				.get-mobile-code {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;


					.mobile-login-code-content {
						width: 80%;
						display: inline-block;
						// font-size: 28rpx;
						color: #000;
					}

					.mobile-login-code-btn {
						position: absolute;
						right: 20rpx;
						background-color: #ee7f06;
						border-radius: 8rpx;
						color: #fff;
						height: 60rpx;
						line-height: 60rpx;
						padding: 0 20rpx;
					}
				}

			}
		}
	}

	.content-about {
		padding-top: 16rpx;
		height: 78rpx;
		line-height: 78rpx;
		display: flex;
		justify-content: space-between;
		width: 100%;
		color: #666666;
		font-size: $font-base;

		.remember {
			display: inline-block;

			.remember-input {
				// font-size: $font-base;
				display: inline-block;
				transform: scale(0.6)
			}

		}

		.forget {
			color: #f3431a;
			// font-size: $font-base;
		}
	}

	.login {
		padding-top: 48rpx;

		.login-content {
			background-color: #f3431a;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 15rpx;
			color: #fff;
			font-size: $font-base;
		}

		// letter-spacing: 19rpx;
		// font-size: 36rpx;
	}


	.register {
		padding-top: 35rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28upx;
		color: #333;

		.go-register {
			color: #0083ff;
		}

	}

	.isdisplaymima {
		width: 38rpx;
		height: 30rpx;
		position: absolute;
		right: 100rpx;
		top: 32rpx;
	}

	.activeRed {
		color: #f3431a !important;
		border-bottom: 2px solid #f3431a;
	}

	.activeBlue {
		color: #f3431a !important;
		border-bottom: 2px solid #f3431a;
	}

	.bjx-form-item .label-inline .item-label {
		margin-right: 0px;
	}

	.bjx-form-item .label-inline {
		width: 100%;
	}

	.other-login {
		width: 100%;
		// // #ifdef APP-PLUS
		// position: absolute;
		// bottom: 120rpx;
		// padding: 0 54rpx;
		// // #endif
		// // #ifdef H5
		// padding: 60rpx 54rpx;
		// // #endif
		padding: 60rpx 54rpx 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color: #666666;

		.other-login-text {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 32rpx;

			.other-login-text-title {
				margin: 0 36rpx;
				font-size: 28upx;
			}
		}
	}

	.agree-files {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 70upx 42upx 0;
		position: relative;
	}

	.agree-files-content {
		line-height: 42rpx;
		width: 100%;
		color: #666666;
		font-size: 24rpx;
		display: flex;
		align-items: center;

		.remember {
			display: inline-flex;

			.remember-input {
				display: inline-block;
				transform: scale(0.6)
			}

		}

		.forget {
			color: #f3431a;
			display: inline-block;
		}
	}

	.switch-login-text {
		font-size: $font-base;
	}

	.animation-shake {
		animation: shake 0.3s !important;
	}

	@keyframes shake {

		0%,
		100% {
			transform: translateX(0)
		}

		10% {
			transform: translateX(-9px)
		}

		20% {
			transform: translateX(8px)
		}

		30% {
			transform: translateX(-7px)
		}

		40% {
			transform: translateX(6px)
		}

		50% {
			transform: translateX(-5px)
		}

		60% {
			transform: translateX(4px)
		}

		70% {
			transform: translateX(-3px)
		}

		80% {
			transform: translateX(2px)
		}

		90% {
			transform: translateX(-1px)
		}
	}

	.apple_login {
		width: 260upx;
		height: 60upx;
		border-radius: 12upx;
		background: #000;
		display: flex;
		align-items: center;
		padding: 0 22upx;
		justify-content: space-between;
		margin-left: 30upx;
	}
</style>
